<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    
    
        
        <ui:composition template="template.xhtml">
           <ui:define name="top">
               <ui:include src="topMenu.xhtml"/>
           </ui:define>
           <ui:define name="content">
               <c:choose>
                     <c:when test="#{loginFormMB.isError}">
                         <div class="alert alert-error">
                                  <button type="button" class="close" data-dismiss="alert">x</button>
                                  <h:outputText value="#{loginFormMB.error}"/>
                                  <script>
                                      $(document).ready(function() {
                                          $('input[type="text"]').val('');
                                      });
                                      
                                  </script>
                         </div>
                     </c:when>
               </c:choose>
               <ui:include src="decoration/mainCarousel.xhtml"/>
                 <h2>Realiza tu búsqueda y pódras ver material de los mejores cursos</h2>
                 <h:form id="searchForCoursesForm">
                  <strong>Categoría:</strong>
                  <div class="input-append">
                      <h:inputText id="category" value="#{indexSearchMB.category}" class="span8"/><button id="showAllBtn" class="btn  btn-info" type="button" onclick="$('#categories').slideToggle();if($('#showAllBtn').html()=='Ocultar'){$('#showAllBtn').html('Ver Todas');}else{$('#showAllBtn').html('Ocultar');};">Ver Todas</button>
                  </div>  
                  <div id="categories" style="display:none;"> 
                      <a class="links" href="#" data-filter="*">Todos</a>
                      <br/>
                      <ui:repeat value="#{categoriesMB.categories}" var="category">
                             <a class="links" href="#" data-filter=".#{category.name}">#{category.name}</a>
                             <br/>
                      </ui:repeat>
                  </div>
                  <br/>
                  <strong>Universidad:</strong>
                  <div class="input-append">
                    <h:inputText id="university" value="#{indexSearchMB.university}" class="span8" /><button id="showAllBtnU" class="btn  btn-info" type="button" onclick="$('#universities').slideToggle();if($('#showAllBtnU').html()=='Ocultar'){$('#showAllBtnU').html('Ver Todas');}else{$('#showAllBtnU').html('Ocultar');};">Ver Todas</button>
                  </div>
                   <div id="universities" style="display:none;"> 
                      <ui:repeat value="#{universitiesMB.universities}" var="university">
                      
                                <h:commandLink class="links" id="universityName" action="#{indexSearchMB.changeUniversity()}" value="#{university.name}">
                                   <f:param name="university" value="#{university.name}"/>
                                </h:commandLink><br/>    
                           
                      </ui:repeat>
                  
                   </div>
                  <br/>
                  <h:commandButton id="search" class="btn btn-primary" value="Buscar"/>
                 </h:form>
                 
                 <div id="containerIso" class="">   
                     <ui:repeat value="#{coursesMB.courses}"  var="courses">
                         <div class="element #{courses.category}">
                             <h:outputText class="name" value="#{courses.name}" style="color: white; font-weight: bold;"/>
                         </div>
                     </ui:repeat>
              
              <br/><br/><br/><br/>
                </div>
                <script>
            $(document).ready(function() {
                
                $('#categories a').click(function(){
                    var selector = $(this).attr('data-filter');
                     $('#containerIso').isotope({ 
                         //masonry: { columnWidth: 240 },
                         filter: selector 
                     });
                      return false;
                    });
            });
        </script>
           </ui:define>
        </ui:composition>
</html>

